<template>
    <div> 
         <el-card  style="margin:20px 0px">
          <!-- 三级联动已经是全局组件了 -->
            <CategorySelect @getCategoryId="getCategoryId" @clearList="clearlist" :show="!(scene!=0)"></CategorySelect>
          </el-card>
         <el-card>
          <!-- 底部这里将来是有三部分进行切换 -->
          <!--1、展示SPU列表数据--> 
          <div v-show="scene==0">
               <el-button type="primary"  icon="el-icon-plus" style="margin:10px 0px" size="small" :disabled="!categoryidObj.category3ID" @click="addSpu">添加SPU</el-button>
               <!-- 表格:展示平台属性 展示的是当前SPU属于自己的销售属性-->
               <el-table border style="width: 100%" size="small" :data="records">
                    <el-table-column type="index" label="序号" width="80px" align="center">
                    </el-table-column>
                    <el-table-column prop="spuName" label="SPU名称" width="width">
                    </el-table-column>
                    <el-table-column prop="description" label="SPU描述" width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                         <template v-slot:default="{row,$index}">
                               <!-- 当用户在使用我们封装的按钮的时候，需要向HintButton组件传递相应的参数（el-button进行二次封装） -->
                              <HintButton type="success" icon="el-icon-circle-plus-outline" size="mini" title="添加sku" @click="addSku(row)"></HintButton>
                              <HintButton type="primary" icon="el-icon-edit" size="mini" title="修改spu"  @click="updateSpu(row)"></HintButton>
                              <HintButton type="warning" icon="el-icon-search" size="mini" title="查看当前spu的全部sku列表" @click="findSkuList(row)"></HintButton>
                              <el-popconfirm :title="`确定删除该属性吗?`" @onConfirm="deleteSpu(row,$index)">   
                                <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference"></HintButton>
                              </el-popconfirm>
                         </template>
                    </el-table-column>
               </el-table>
               <el-pagination 
                    style="margin-top: 20px;text-align: center;"
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page="currentPage"
                    :page-sizes="[3, 5, 10]" 
                    :page-size="limit"
                    layout="prev, pager, next, jumper, ->,sizes,total" 
                    :total="total"
                    :pager-count=5
                    >
               </el-pagination>
          </div>
          <!--2、添加SPU|修改SPU-->
          <!-- @click,底下这里代表的是自定义事件 -->
          <SpuForm v-show="scene==1"  @changeScene="changeScene" ref="spu"></SpuForm>

           <!--3、添加SKU -->
          <SkuForm v-show="scene==2" ref="sku"  @changeScene="changeSceneSku"></SkuForm>

         </el-card>
          <el-dialog :title="`${spuName}的Sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
               <!-- table展示sku列表 -->
               <el-table :data="skuList" style="width:100%" v-loading="loading">
                    <el-table-column prop="skuName" label="名称" width="420px"></el-table-column>
                    <el-table-column prop="price" label="价格"  width="width" align="center"></el-table-column>
                    <el-table-column prop="weight" label="重量(g)" width="width" align="center"></el-table-column>
                    <el-table-column prop="prop" label="默认图片"  width="width" align="center">
                         <template v-slot:default="{row}">
                              <div style="width: 80px;height: 80px; margin: 0px auto;">
                                   <img :src="row.skuDefaultImg" alt="" style="width:100%;">
                              </div>
                         </template>
                    </el-table-column>
               </el-table>
          </el-dialog>
    </div>
</template>

<script>
// 引入子组件
import  SpuForm from '@/views/product/Spu/SpuForm'
import  SkuForm from '@/views/product/Spu/SkuForm'

export default {
     name:'Spu',
     components:{SpuForm,SkuForm},
     data() {
          return {
               //获取并存储分类id
               categoryidObj: {},
               // 获取spu属性列表
               records:[],
               // 代表的分页器第几页
               currentPage: 1,
               // 总数据条数
               total:0,
               // 当前页数展示数据条数
               limit:3,
               // 0代表展示SPU列表数据 1代表添加SPU|修改SPU 2代表添加SKU
               scene:0,

               //弹出框
               dialogTableVisible: false,
               //存储sku列表信息
               skuList:[],
               spuName:'',
               loading:true
          }
     },
     methods:{
          //分页器
          handleSizeChange(val) {
               this.limit = val
               this.getSpuList()
          },
          handleCurrentChange(val) {
               //获取当前页，重新发送请求，刷新页面
               this.getSpuList(val)
          },
          //自定义事件的回调
          getCategoryId(categoryids) {
               this.categoryidObj = categoryids
               this.getSpuList()
               // 解决添加属性时查询按钮失效问题
               this.scene = 0
          }, 
          clearlist(){
               //重置清除数据列表
               this.records = [];
               //重置返回初始页面
               this.scene =0
          },
          //spuform自定义事件
          changeScene({scene,flag}){
               //spuForm组件取消事件
               this.scene = scene
               if(flag == '修改'){
                  //spuform子组件确认修改时,刷新页面,停留在当前页
                  this.getSpuList(this.currentPage)  
               }else if(flag == '添加'){
                    this.getSpuList()
               }else{
                    return
               }
          },
          //skufrom自定义事件
          changeSceneSku({scene,flag}){
               this.scene = scene
               if(flag == "success"){
                    this.getSpuList(this.currentPage) 
               }
          },
          //获取平台属性的数据
          async getSpuList(pager = 1){
            this.currentPage = pager
          //只有当三级分类有值时才请求数据
            if(this.categoryidObj.category3ID){
               const {currentPage,limit,categoryidObj} = this;
               // 携带三个参数： currentPage当前第几页 limit 每一页需要展示多少条数据 三级分类id
               let result = await this.$API.spu.reqSpuList(currentPage,limit,categoryidObj.category3ID);
               if(result.code == 200){
                    this.records = result.data.records
                    this.total = result.data.total
               }
               // 打印输出
               console.log(result);
            }else{
                 // 弹出信息
              this.$message({
                message: ("请选择详细分类"),
                type: 'warning'
              })
            }
          },
          //添加Spu属性
          addSpu(){
               this.scene = 1
               //初始化spuform表单
               let childrenspu =  this.$refs.spu.spu
              /*  childrenspu.spuSaleAttrList =[]; 
               childrenspu.spuName ='';
               childrenspu.tmId ='';
               childrenspu.description ='';
               this.$refs.spu.spuImages=[];
               childrenspu.spuImages=[]; */
               childrenspu.id = undefined
               //通知子组件SpuFrom发两个请求（获取品牌的数据，全部销售属性的数据）
               this.$refs.spu.addSpuData(this.categoryidObj.category3ID)
                //取消后移除表单项的校验结果
               this.$refs.spu.$refs.formSpu.clearValidate()
          },
          //修改Spu属性的回调
          updateSpu(row){
               this.scene = 1
               // 方式1.全局事件总线
               // this.$bus.$emit('getSpuId',row)
               // 方式2.ref属性
               this.$refs.spu.initSpuData(row)
               //清除校验
               this.$refs.spu.$refs.formSpu.clearValidate()
          },
          //删除Spu的回调
          async deleteSpu(row,$index){
          //拿到spuid，发送删除请求
          const result = await this.$API.spu.reqDeleteSpu(row.id)
          if(result.code == 200){
          //重新刷新页面
          this.$message({
                message: ("删除成功"),
                type: 'success'
              })
          //再次获取平台列表数据,this.records.length>1说明当前页的数据大于1,如果小于1删除后展示前面一页
          this.getSpuList(this.records.length>1?this.currentPage:this.currentPage -1);
           }
               console.log(result);
          },
          //添加Spk
          addSku(row){
               this.scene = 2
          //父组件调用子组件的方法，让子组件发请求-----三个请求
          this.$refs.sku.getData(row,this.categoryidObj)
            //取消后移除表单项的校验结果
          this.$refs.sku.$refs.formSku.clearValidate()
          },
          //根据spuId查看sku列表
          async findSkuList(row){
               this.dialogTableVisible = true
              const result = await this.$API.sku.reqSkuList(row.id)
              if(result.code){
                this.skuList = result.data;
               //loading隐藏
               this.loading = false
              }
              this.spuName = row.spuName
          },
          //关闭对话框的回调
          close(done){
               // loading属性再次变为真
               this.loading = true;
               // 清除sku列表的数据
               this.skuList = [];
               // 关闭对话框
               done();
          }
     }
}
</script>

<style scoped lang="less">

</style>